<header data-ng-include="'/static/modules/core/views/header.client.view.html'"></header>

<section class="admin-form container-fluid">

	<!-- Modal Delete Dialog Template -->
    <script type="text/ng-template" id="formDeleteModal.html">
        <div class="modal-header">
            <h2 class="modal-title hidden-md hidden-lg">{{ 'ARE_YOU_SURE' | translate }}</h2>
            <h3 class="modal-title hidden-xs hidden-sm">{{ 'ARE_YOU_SURE' | translate }}</h3>
        </div>
        <div class="modal-body">
        	<div class="modal-body-alert">
				{{ 'READ_WARNING' | translate }}
			</div>
       		<p class="hidden-xs hidden-sm">
       		 	{{ 'DELETE_WARNING1' | translate }} <strong>{{myform.title}}</strong> {{ 'DELETE_WARNING2' | translate }}
       		</p>
            <p>{{ 'DELETE_CONFIRM' | translate }}</p>
        </div>
        <div class="modal-footer">
			<input type="text" style="width:100%" data-ng-model="deleteConfirm" class="input-block" autofocus required aria-label="Type in the name of the form to confirm that you want to delete this form.">
            <button type="submit" ng-click="removeCurrentForm()" class="btn btn-block btn-danger" ng-disabled="myform.title != deleteConfirm">
            	{{ 'I_UNDERSTAND' | translate }}
            </button>
        </div>
    </script>

	<div class="page-header row" style="padding-bottom: 1em;">
		<div class="col-xs-10 col-sm-8">
			<h1 class="hidden-sm hidden-xs" data-ng-bind="myform.title" style="margin-bottom: 0px;"></h1>
			<h2 class="hidden-md hidden-lg" data-ng-bind="myform.title" style="margin-bottom: 0px;"></h2>
		</div>
		<div class="col-xs-1 col-sm-2">
			<small class="pull-right">
				<button class="btn btn-danger" ng-click="openDeleteModal()">
					<i class="fa fa-trash-o"></i>
					<span class="show-sm hidden-lg hidden-md hidden-xs">{{ 'DELETE_FORM_SM' | translate}}</span>
					<span class="hidden-xs hidden-sm">{{ 'DELETE_FORM_MD' | translate}}</span>
				</button>
			</small>
		</div>
		<div class="col-xs-1 col-sm-2">
			<small class="pull-right">
				<a class="btn btn-secondary view-form-btn" href="{{actualFormURL}}">
					<span class="hidden-xs hidden-sm">
						{{ 'VIEW' | translate }}
						<span ng-show="myform.isLive">
							{{ 'LIVE' | translate }}
						</span>
						<span ng-hide="myform.isLive">{{ 'PREVIEW' | translate }}</span>
					</span>
					<i class="status-light status-light-on fa fa-dot-circle-o" ng-if="myform.isLive"></i>
					<i class="status-light status-light-off fa fa-dot-circle-o" ng-if="!myform.isLive"></i>
				</a>
			</small>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<uib-tabset active="activePill" vertical="true" type="pills">
				<uib-tab index="0" heading="{{ 'CREATE_TAB' | translate }}" select="deactivateDesignTab()">
					<edit-form-directive myform="myform"></edit-form-directive>
				</uib-tab>
				<uib-tab ng-repeat="tab in tabData" index="{{$index+1}}" heading="{{tab.heading}}" select="deactivateDesignTab()">
					<div class='row' data-ng-include="'/static/modules/forms/admin/views/adminTabs/'+tab.templateName+'.html'"></div>
				</uib-tab>
				<uib-tab index="2" heading="{{ 'ANALYZE_TAB' | translate }}" select="deactivateDesignTab()">
					<edit-submissions-form-directive myform="myform" user="myform.admin"></edit-submissions-form-directive>
				</uib-tab>
				<uib-tab ng-if="tabData" heading="{{ 'SHARE_TAB' | translate }}" index="{{tabData.length}}" select="deactivateDesignTab()">
					<div class="config-form">
						<div class="row">
							<div class="col-sm-12">
								<uib-tabset active="activePill" vertical="true" type="pills">
									<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
										<div class="row">
											<div class="col-sm-12">
												{{ 'TELLFORM_URL' | translate }}
											</div>
											<div class="col-sm-8 form-input">
												<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
											</div>
											<div class="col-sm-4">
												<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
													{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
												</button>
											</div>
										</div>
									</uib-tab>
									<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
										<div class="row">
											<div class="col-sm-12">
												{{ 'COPY_AND_PASTE' | translate }}
											</div>
											<div class="col-sm-8 form-input">
												<span ngclipboard data-clipboard-target="#copyEmbedded">
													<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
														&lt;!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} --&gt;
														<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
														<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
													</textarea>
												</span>
											</div>
											<div class="col-sm-4">
												<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
													{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
												</button>
											</div>
										</div>
									</uib-tab>
								</uib-tabset>
							</div>
						</div>
					</div>
				</uib-tab>
				<uib-tab class="design-tab" ng-if="tabData && myform.form_fields.length" heading="{{ 'DESIGN_TAB' | translate }}" index="{{tabData.length}}+1"
					select="activateDesignTab()">
					<div class="config-form design container">
						<div class="row">
							<div class="col-sm-4 col-xs-12">
								<div class="row field">
									<div class="field-title col-sm-5">
										<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
									</div>
									<div class="field-input col-sm-6">
										<input class="form-control" colorpicker="hex" type="text" 
										ng-model="myform.design.colors.backgroundColor" 
										ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
										ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
									</div>
								</div>

								<div class="row field">
									<div class="field-title col-sm-5">
										<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
									</div>

									<div class="field-input col-sm-6">
										<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
									</div>
								</div>

								<div class="row field">
									<div class="field-title col-sm-5">
										<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
									</div>

									<div class="field-input col-sm-6">
										<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
									</div>
								</div>

								<div class="row field">
									<div class="field-title col-sm-5">
										<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
									</div>

									<div class="field-input col-sm-6">
										<input class="form-control" colorpicker="hex" type="text"
											   ng-model="myform.design.colors.buttonColor"
											   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
											   ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
									</div>
								</div>
								<div class="row field">
									<div class="field-title col-sm-5">
										<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
									</div>

									<div class="field-input col-sm-6">
										<input class="form-control" colorpicker="hex" type="text"
											   ng-model="myform.design.colors.buttonTextColor"
											   ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
											   ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
									</div>
								</div>
							</div>
							<div class="col-sm-8 hidden-xs" ng-if="designTabActive">
								<div class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
									<iframe id="iframe" ng-if="!!formURL" ng-src="{{formURL | trustSrc}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-sm-offset-4 col-sm-2">
								<button class="btn btn-signup btn-rounded" type="button" ng-click="updateDesign(false, myform, false, false)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
							</div>
							<div class="col-sm-1">
								<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
							</div>
						</div>
					</div>
				</uib-tab>
			</uib-tabset>
		</div>
	</div>
</section>
